<script setup lang="tsx">
import { MessagePlugin } from 'tdesign-vue-next';
import { useLoading } from '~/store/manager/loading';

definePageMeta({
    layout: 'manager',
})

//store
const loadingStore = useLoading();

// 新增按钮点击事件
const showFormHandle = () => {
    // 表单类型设置为新建
    createForm.value = true;
    // 显示表单
    showForm.value = true;
}

// 表格数据
const tableData = ref([]);
// 表格显示列
const tableDataColumns = ref([
    {
        colKey: 'gid',
        title: 'GID'
    },
    {
        colKey: 'status',
        title: '状态',
        cell: (h: any, { row }) => (
            <div class="group-status">
                <t-tag shape="round" theme={row.status === 0 ? 'success' : 'danger'} variant="light-outline">
                    {row.status === 0 ? '正常' : '禁用'}
                </t-tag>
            </div>
        ),
    },
    {
        colKey: 'title',
        title: '名称'
    },
    {
        colKey: 'operate',
        title: '操作',
        cell: (h: any, { row }) => (
            <div class="group-operate">
                <t-space direction="vertical"></t-space>
                <t-space>
                    <t-button theme="success" shape="square" size="small" variant="base" onClick={() => {
                        // 设置表单类型为编辑
                        createForm.value = false;
                        formData.content = { ...row };
                        formData.content.rights = JSON.parse(formData.content.rights as any);
                        // 显示表单对话框
                        showForm.value = true;
                    }}><t-icon name="edit" /></t-button>
                    <t-popconfirm content={row.status === 0 ? '确认禁用吗？' : '确认启用吗'} onConfirm={() => onConfirm(row)}>
                        <t-button theme={row.status === 0 ? 'danger' : 'primary'} shape="square" size="small" variant="base"><t-icon name={row.status === 0 ? 'close' : 'check'} /></t-button>
                    </t-popconfirm>
                </t-space>
            </div>
        ),
    }
])

// 表单对话框类型
const createForm = ref(true);   // 默认创建表单
// 表单对话框显示/隐藏
const showForm = ref(false);
// 表单对话框标题
const formTitle = ref('新增');
// 所有权限列表
const authMenusList = ref([]);
// 所有权限列表显示key
const authMenusListKeys = {
    value: 'auth_id',
    label: 'title',
}


// 表单数据
const formData = reactive({
    content: {
        flag: 'create',
        gid: 0,
        status: 0,
        title: '',
        rights: []
    }
})
// 重置表单数据
const resetFormData = () => {
    let tmpData = {
        flag: 'create',
        gid: 0,
        status: 0,
        title: '',
        rights: []
    }
    formData.content = tmpData;
}
// 关闭表单对话框
const close = () => {
    // 重置表单
    resetFormData();
    // 隐藏对话框
    showForm.value = false;
}

// 确认启用/禁用
const onConfirm = (row: any) => {
    group_status({ gid: row.gid }).then((res: any) => {
        if (res.success) {
            MessagePlugin.success({
                content: res.message
            })
            // 重载当前页面
            __initialize();
        }
    }).catch((err) => {
        console.log(err);
    })
}
// 提交表单
const onConfirmAnother = () => {
    if (createForm.value) {
        // 新增用户组,设置flag
        formData.content.flag = 'create';
    } else {
        // 编辑用户组，设置flag
        formData.content.flag = 'update';
    }
    // 发起网络请求
    create_group(formData.content).then((res: any) => {
        if (res.success) {
            MessagePlugin.success({
                content: res.message
            });
            // 隐藏表单
            showForm.value = false;
            // 重置表单数据
            resetFormData();
            // 重新载入当前页面
            __initialize();
        }
    }).catch((err) => {
        console.log(err);
    })
}

// 监听类型变化
watch(createForm, (value, oldValue) => {
    if (value) {
        // 创建表番
        formTitle.value = '新增';
    } else {
        formTitle.value = '编辑';
    }
})

// 页面初始化
const __initialize = () => {
    // 获取用户组表格数据
    get_group_list({ flag: 'table' }).then((res: any) => {
        if (res.success) {
            tableData.value = res.data
        }
    }).catch((err) => {
        console.log(err);
    })

    // 获取所有权限列表
    get_auth_list({ flag: 'normal' }).then((res: any) => {
        if (res.success) {
            authMenusList.value = res.data
        }
    }).catch(((err) => {
        console.log(err);
    }))
}

// 页面挂在
onMounted(() => {
    __initialize();
})
</script>
<template>
    <div class="table-container">
        <div class="toolbar mb-[30px]">
            <t-card>
                <t-row>
                    <t-col :span="3">
                        <div class="add-button">
                            <t-button theme="primary" @click="showFormHandle">
                                <template #icon><t-icon name="add" /></template>
                                新建
                            </t-button>
                        </div>
                    </t-col>
                    <t-col :span="3"></t-col>
                    <t-col :span="3"></t-col>
                    <t-col :span="3"></t-col>
                </t-row>
            </t-card>
        </div>
        <div class="table-box">
            <t-card>
                <t-table row-key="auth_id" :data="tableData" :columns="tableDataColumns" :stripe="true" :bordered="false"
                    :loading="loadingStore.getTableLoading" :hover="true" :show-header="true" cell-empty-content="-"
                    lazy-load>
                </t-table>
            </t-card>
        </div>

        <client-only>
            <div class="form-box">
                <t-dialog v-model:visible="showForm" :header="formTitle" width="40%" :confirm-on-enter="true"
                    :closeOnOverlayClick="false" :on-close="close" :on-confirm="onConfirmAnother">
                    <t-space direction="vertical" style="width: 100%">
                        <div>
                            <t-form>
                                <t-form-item label="用户组名称" name="title">
                                    <t-input placeholder="请输入用户组名称" v-model="formData.content.title" />
                                </t-form-item>
                                <t-form-item label="状态" name="status">
                                    <t-radio-group v-model="formData.content.status">
                                        <t-radio-button :value="0">启用</t-radio-button>
                                        <t-radio-button :value="1">禁用</t-radio-button>
                                    </t-radio-group>
                                </t-form-item>
                                <t-form-item label="权限列表" name="rights">
                                    <t-transfer v-model="formData.content.rights" theme="primary" :data="authMenusList"
                                        :keys="authMenusListKeys" :search="true" :operation="['移除', '加入']">
                                        <template #title="props">
                                            <div>{{ props.type === 'target' ? '全部权限池' : '拥有权限表' }}</div>
                                        </template>
                                        <template #footer="props">
                                            <div style="padding: 12px; border-top: 1px solid #e7e7e7">
                                                <span v-if="props.type === 'source'">选中并加入</span>
                                                <span v-else>选中并移除</span>
                                            </div>
                                        </template>
                                    </t-transfer>
                                </t-form-item>
                            </t-form>
                        </div>
                    </t-space>
                </t-dialog>
            </div>
            <pre>
            </pre>
        </client-only>
    </div>
</template>
<style scoped></style>